import React from 'react';
import { Popconfirm, Table, Tag } from 'antd';
import { connect } from 'umi';
import moment from 'moment';

const currControl = 'Edu_MyCoupon';

class ViewPage extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      loading: false,
      dataSource: [],
      visible: false,
      pageIndex: 1,
      pageSize: 10,
      totalCount: 0,
      payload: {},
      record: {},
    };
  }
  componentDidMount() {
    if (this.props.couponId) {
      this.setState({ couponId: this.props.couponId });
      this.fetchDatas(this.props.couponId);
    }
  }
  fetchDatas = (id: any) => {
    this.setState({ loading: true });
    const { pageIndex, pageSize } = this.state;
    this.props
      .dispatch({
        type: 'Abp/getList',
        payload: { SkipCount: (pageIndex - 1) * pageSize, MaxResultCount: pageSize, memberId: id },
        control: currControl,
      })
      .then(() => {
        var resp = this.props.response;
        if (resp) {
          var dataSource = resp.result?.items;
          this.setState({ loading: false, dataSource, totalCount: resp.result?.totalCount });
        }
      });
  };
  handleDelete = (id: number) => {
    this.props
      .dispatch({
        type: 'Abp/delete',
        payload: { id },
        control: currControl,
      })
      .then(() => {
        this.fetchDatas(this.props.couponId);
      });
  };
  render() {
    const { loading, dataSource, totalCount, pageSize, couponId } = this.state;
    const columns: any = [
      {
        title: '优惠券名称',
        dataIndex: 'tCoupon',
        render: (text: string, record: any) => <span>{record.tCoupon.title}</span>,
      },
      {
        title: '优惠券类型',
        dataIndex: 'tCoupon',
        render: (text: string, record: any) => <span>{record.tCoupon.type}</span>,
      },
      {
        title: '优惠金额',
        dataIndex: 'tCoupon',
        render: (text: string, record: any) => <span>{record.tCoupon.points}</span>,
      },
      {
        title: '优惠券简介',
        dataIndex: 'tCoupon',
        render: (text: string, record: any) => <span>{record.tCoupon.memo}</span>,
      },
      {
        title: '发放时间',
        dataIndex: 'startTime',
        render: (text: Date, record: any) => (
          <span>{moment(text).format('YYYY-MM-DD hh:mm:ss')}</span>
        ),
      },
      {
        title: '优惠券有效时间',
        dataIndex: 'startTime',
        width: 300,
        render: (text: Date, record: any) => (
          <span>
            {record.tCoupon.startTime == null
              ? ''
              : moment(record.tCoupon.startTime).format('YYYY-MM-DD hh:mm:ss')}
            ~
            {record.tCoupon.endTime == null
              ? ''
              : moment(record.tCoupon.endTime).format('YYYY-MM-DD hh:mm:ss')}
          </span>
        ),
      },
      //   {
      //     title: '有效期',
      //     dataIndex: 'endTime',
      //     render: (text: string, record: any) => (
      //       <span>{moment(record.tCoupon.endTime).format('YYYY-MM-DD hh:mm:ss')}</span>
      //     ),
      //   },
      {
        title: '优惠券状态',
        dataIndex: 'status',
        render: (text: string, record: any) => {
          if (text == "1") {
            return <Tag color="blue">已使用</Tag>
          } else if (text == '0') {
            return <Tag color="green">待使用</Tag>
          } else if (text == '2') {
            return <Tag color="red">已过期</Tag>
          } else if (text == '3')
          return <Tag color="gray">已失效</Tag>
        },
      },
      {
        title: '操作',
        render: (record: any) =>
          dataSource.length >= 1 ? (
            <span>
              <Popconfirm title="确定删除?" onConfirm={() => this.handleDelete(record.id)}>
                <a>删除</a>
              </Popconfirm>
            </span>
          ) : null,
      },
    ];
    return (
      <>
        <Table
          rowKey="id"
          loading={loading}
          columns={columns}
          dataSource={dataSource}
          pagination={{
            onChange: (page) => {
              this.setState({ pageIndex: page }, () => {
                this.fetchDatas(couponId);
              });
            },
            pageSize,
            total: totalCount,
          }}
        />
      </>
    );
  }
}
export default connect(({ Abp }: API.IConnectState) => ({
  response: Abp.response,
  currentUser: Abp.currentUser,
}))(ViewPage);
